<div align="center">
    <h1>КиноКосмос</h1>
    <strong><i>Узнай о фильмах всё и поделись своим мнением!</i></strong>
    <br>
    <br>
    <p>На нашем сайте вы можете найти информацию о фильмах, сериалах и шоу, рецензии, отзывы пользователей и сами оставить отзыв.</p>
</div>

---

###  Описание проекта
Сайт представляет собой информационный ресурс о фильмах с возможностью авторизации пользователя и сохранением его выбора фильмов в базе данных. 

В проекте была использована база данных **Firebase (Cloud Firestore)**. Для отображения информации о фильмах использовался **[Kinopoisk API Unofficial](https://kinopoiskapiunofficial.tech/)**.


<details>
<summary><i>Подробное описание</i></summary>

#### Header (шапка сайта)

Header представлен на всех страницах сайта и включает в себя:
- Логотип, при клике на который происходит переход на главную страницу;
- Ссылку на страницу **Каталога**;
- **Поиск** по ключевым словам. При вводе ключевого слова отображается список со ссылками на страницы найденных фильмов;
- <details><summary>Атрибуты <b>личного кабинета</b>:</summary>
    
    - Кнопка **Войти**, если пользователь не авторизован. При нажатии, открывается модальное окно входа в **личный кабинет**;
    - Приветствие авторизованного пользователя, при нажатии на аватарку происходит переход в **личный кабинет**;
    - Кнопка выхода из **личного кабинета** (при нажатии на кнопку выхода, в случае, если пользователь находится в **личном кабинете**, происходит переход на **главную страницу**).
    
    </details>

Для мобильных устройств реализовано *бургер-меню*.

#### Авторизация и регистрация

*Модальное окно входа в **личный кабинет*** может отображаться на **главной странице**, в **каталоге** и на **странице фильма**. Через него можно перейти на **форму регистрации** (на отдельной странице). Реализована возможность восстановления пароля.

#### Главная страница

На главной странице представлены:
- название сайта, слоган, описание;
- постеры из топа популярных фильмов, которые отображаются в случайном порядке (переход на страницу фильма осуществляется при нажатии на его название фильма);
- блок со случайной цитатой из фильма или сериала (файл со списком цитат сгенерирован нейросетью).

#### Личный кабинет

На страницу личного кабинета может войти только авторизованный пользователь. Там отображены фильмы, которые были добавлены пользователем в **Избранное**. Пользователь может удалить фильмы из **Избранного**.

В будущем будет реализована возможность создания своих списков, добавления туда фильмов и сериалов.


#### Каталог

В **Каталоге** есть поиск по фильтрам. Реализованы фильтры по жанру, стране и категории (фильм, сериал и т.п.). Список фильмов отсортирован по рейтингу от большего к меньшему. Пагинация реализована с помощью скроллинга: найденные фильмы отображаются на странице по 20 штук, при достижении конца страницы, подгружаются следующие 20.

Авторизованный пользователь видит, что фильм у него в **Избранном** ( <img src="https://raw.githubusercontent.com/MarinaIatsuk/F64_JS2_Project/c775fb2f4bfbdcfc29460ed212fb1193f6d6a041/assets/images/likeFilledPink.svg" height="14" alt=":heart:"/> иконка рядом с названием окрашена ), может удалять и добавлять фильмы в **Избранное** по нажатию на иконку. Для гостя при попытке добавить фильм в **Избранное** откроется модальное окно авторизации.

Переход на страницу фильма осуществляется при нажатии на его название.


#### Страница фильма

Страница фильма содержит:
- Подробное описание фильма или сериала с основными актерами, которые в нем участвовали;
- Информацию о сезонах сериалов с описанием каждой серии;
- Возможность добавить фильм в **Избранное** и удалить из него (для авторизованного пользователя), для гостя при попытке добавить фильм в **Избранное** откроется модальное окно авторизации;
- Рецензии пользователей Кинопоиска;
- Отзывы пользователей, зарегистрированных на нашем сайте;
- Возможность авторизованному пользователю добавить отзыв, для гостя — предложение сначала авторизоваться.

</details>

---
### Технологии и инструменты

<div align="center">
    <img src="https://img.shields.io/badge/javascript-323330?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E" alt="JavaScript"/>
    <img src="https://img.shields.io/badge/html5-E34F26?style=for-the-badge&logo=html5&logoColor=white" alt="HTML5"/>
    <img src="https://img.shields.io/badge/sass-CF649A?style=for-the-badge&logo=Sass&logoColor=white" alt="SASS"/>
    <img src="https://img.shields.io/badge/git-%23F05033?style=for-the-badge&logo=git&logoColor=white" alt="Git"/>
    <img src="https://img.shields.io/badge/github-121011?style=for-the-badge&logo=github&logoColor=white" alt="GitHub"/>
    <img src="https://img.shields.io/badge/Firebase-039BE5?style=for-the-badge&logo=Firebase&logoColor=white" alt="Firebase"/>
    <img src="https://img.shields.io/badge/vite-646CFF.svg?style=for-the-badge&logo=Vite&logoColor=white" alt="Vite"/>
    <a title="Kinopoisk Unofficial API" href="https://kinopoiskapiunofficial.tech/">
        <img src="https://img.shields.io/badge/api-1B1818?style=for-the-badge"/>
    </a>
</div>

---
### Команда проекта

<div align="center">
    <a href="https://github.com/MarinaIatsuk/F64_JS2_Project/graphs/contributors">
        <img src="https://contrib.rocks/image?repo=MarinaIatsuk/F64_JS2_Project" width="520"/>
    </a>
</div>

<p align="center">
  <samp>
    <a href="https://github.com/MarinaIatsuk">Marina</a> •
    <a href="https://github.com/fukuniji">Nat</a> •
    <a href="https://github.com/AlinaSun0201">Alina</a> •
    <a href="https://github.com/MaiorovaElena">Helen</a> •
    <a href="https://github.com/Yanastya89">Anastasiia</a> •
    <a href="https://github.com/slastinatalia">Nataliia</a> •
    <a href="https://github.com/NikaAzizova">Nika</a>
  </samp>
</p>
